<script setup lang="ts">
  import TableLayout from '@/layout/table-layout.vue';
  import { usePageTable } from '@/hooks/arco/usePageTable';
  // 导入我们刚刚创建的API接口
  import { queryServicePlanList } from '@/api-new2/service/service-plan';
  import { useRouter } from 'vue-router';

  const router = useRouter();
  // 定义查询表单字段
  const searchFormState = {
    elderName: '', // 客户姓名(老人姓名)
    associatedSite: '', // 关联站点(暂无对应字段)
    planStatus: '', // 计划状态
  };

  // 定义表格列
  const columns = [
    {
      title: '计划ID',
      dataIndex: 'id',
      width: 120,
    },
    {
      title: '计划时间',
      dataIndex: 'startDate',
      slotName: 'planTime',
      width: 150,
    },
    {
      title: '计划状态',
      dataIndex: 'planStatusName',
      width: 120,
    },

    {
      title: '客户姓名',
      dataIndex: 'elderName',
      width: 120,
    },
    {
      title: '客户性别',
      dataIndex: 'elderGender', // 数据中没有直接提供，需要通过其他方式获取
      width: 100,
    },
    {
      title: '关联站点',
      dataIndex: 'stationTime', // 数据中没有直接提供
      width: 150,
    },

  ];

  // 使用usePageTable创建分页表格
  const pageTable = usePageTable({
    create:false,
    searchForm: {
      state: { ...searchFormState },
    },
    table: {
      rowKey: 'id',
      apiFun: queryServicePlanList, // 使用我们创建的API接口
      columns,

    },
  });

  const onCreate = () => {
    router.push({ name: 'ServicePlanCreate' });
  };
</script>

<template>
  <div class="flex flex-col">
    <TableLayout v-bind="pageTable.bindProps" @create="onCreate">
      <template #searchForm="{ state }">
        <a-form-item field="elderName" label="客户姓名">
          <a-input
            v-model="state.elderName"
            placeholder="请输入客户姓名"
            allow-clear
          />
        </a-form-item>
<!--        <a-form-item field="associatedSite" label="关联站点">-->
<!--          <a-input-->
<!--            v-model="state.associatedSite"-->
<!--            placeholder="请输入关联站点"-->
<!--            allow-clear-->
<!--          />-->
<!--        </a-form-item>-->
<!--        <a-form-item field="planStatus" label="计划状态">-->
<!--          <a-select-->
<!--            v-model="state.planStatus"-->
<!--            placeholder="请选择计划状态"-->
<!--            allow-clear-->
<!--            :options="[-->
<!--              { label: '待执行', value: '1' },-->
<!--              { label: '进行中', value: '2' },-->
<!--              { label: '已完成', value: '3' },-->
<!--              { label: '已暂停', value: '4' },-->
<!--            ]"-->
<!--          />-->
<!--        </a-form-item>-->
      </template>

      <template #planTime="{ record }">
        {{ record.startDate }} ~ {{ record.endDate }}
      </template>

      <template #action="{ record }">
        <a-space>
          <a-button
            size="mini"
            type="text"
            @click="detailHandler.showModal(record)"
          >
            查看
          </a-button>
          <a-button
            size="mini"
            type="text"
            @click="editHandler.showEdit(record)"
          >
            编辑
          </a-button>
        </a-space>
      </template>
    </TableLayout>
  </div>
</template>

<style lang="less" scoped></style>
